import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { Header, Loading, RouterView } from 'src/components'
import { SwitchTransition, CSSTransition } from "react-transition-group";
import { useSelector } from 'react-redux'
import { getHongbaoNum } from 'src/api/getData'
import classNames from 'classnames'
import routerData from './routerData'
import './index.scss'


const Benefit = () => {
    const { userInfo } = useSelector(state => state);
    const [showLoading, setShowLoading] = useState(true)
    const [hongbaoList, setHongbaoList] = useState()
    const [categoryType, setCategoryType] = useState(1)


    useEffect(() => {
        const initData = async () => {
            if (userInfo && userInfo.user_id) {
                let res = await getHongbaoNum(userInfo.user_id);
                setHongbaoList(res.data)
                setShowLoading(false)
            }
        }
        initData()
    }, [userInfo])


    return <div className="page_benefit">
        <Header title="我的优惠" goBack></Header>
        {
            !showLoading && <section>
                <section className="category_title">
                    <span className={classNames({ choosed: categoryType === 1 })} onClick={() => { setCategoryType(1) }}>红包</span>
                    <span className={classNames({ choosed: categoryType === 2 })} onClick={() => { setCategoryType(2) }}>商家代金券</span>
                </section>

                <SwitchTransition
                    mode="out-in"
                >
                    <CSSTransition
                        key={categoryType}
                        addEndListener={(node, done) => {
                            node.addEventListener("transitionend", done, false);
                        }}
                        classNames="router-fade"
                        timeout={500}
                    >
                        {
                            categoryType === 1 ? <section>
                                <section className="hongbao_container">
                                    <header className="hongbao_title">
                                        <section className="total_number">
                                            有 <span>{hongbaoList.length}</span> 个红包即将到期
                                        </section>
                                        <section className="hongbao_description">
                                            <img src="/images/description.png" height="24" width="24" alt="" />
                                            <Link to="/benefit/hbDescription" className="hongbao_detail">红包说明</Link>
                                        </section>
                                    </header>
                                    <ul className="hongbao_list_ul">
                                        {
                                            hongbaoList.map((item) => {
                                                return <li className="hongbao_list_li" key={item.id}>
                                                    <section className="list_item">
                                                        <div className="list_item_left">
                                                            <span>¥</span>
                                                            <span>{String(item.amount).split('.')[0]}</span>
                                                            <span>.</span>
                                                            <span>{String(item.amount).split('.')[1] || 0}</span>
                                                            <p>{item.description_map.sum_condition}</p>
                                                        </div>
                                                        <div className="list_item_right">
                                                            <h4>{item.name}</h4>
                                                            <p>{item.description_map.validity_periods}</p>
                                                            <p>{item.description_map.phone}</p>
                                                        </div>
                                                        <div className="time_left">{item.description_map.validity_delta}</div>
                                                    </section>
                                                    {
                                                        item.limit_map && <footer className="list_item_footer">
                                                            <p>{item.limit_map.restaurant_flavor_ids}</p>
                                                        </footer>
                                                    }
                                                </li>
                                            })
                                        }
                                    </ul>
                                </section>
                                <Link to="/benefit/hbHistory" className="history_hongbao">
                                    <span className="check_history">查看历史红包</span>
                                    <svg className="history_right">
                                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                                    </svg>
                                </Link>
                                <footer className="hongbao_footer">
                                    <Link to="/benefit/exchange" className="hongbao_style" style={{
                                        borderRight: '1px solid #f5f5f5'
                                    }}>
                                        兑换红包
                                    </Link>
                                    <Link to="/benefit/commend" className="hongbao_style">
                                        推荐有奖
                                    </Link>
                                </footer>
                            </section>
                                : <section className="voucher_container">
                                    <section className="hongbao_description voucher_header">
                                        <img src="/images/description.png" height="24" width="24" alt="" />
                                        <Link to="/benefit/coupon" className="hongbao_detail">商家代金券说明</Link>
                                    </section>
                                    <section className="unable_use">
                                        <img src="/images/voucher.png" height="170" width="300" alt="" />
                                        <p>无法使用代金券</p>
                                        <p>非客户端或客户端版本过低</p>
                                        <Link to="/download" className="download_app">
                                            下载或升级客户端
                                        </Link>
                                    </section>
                                </section>
                        }
                    </CSSTransition>
                </SwitchTransition>
            </section>
        }
        {showLoading && <Loading />}
        <RouterView data={routerData} />
    </div>
}

export default Benefit